<template>
	<view class="tab-container">
		<!-- 滚动区域 -->
		<scroll-view scroll-x="true" class="tab-scroll" :scroll-with-animation="true" :scroll-into-view="currentIndex">
			<view class="tab-scroll-box">
				<view class="tab-scroll-item" :class="{ active: activeIndex === index }"
					v-for="(item, index) in labelList" :key="index" @click="selectActive(item, index)"
					:id="`item${index}`">
					{{ item.categoryName }}
				</view>
			</view>
		</scroll-view>
		<!-- 按钮部分 -->
		<view class="tab-icon">
			<button @click="addCate">添加分类</button>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	watch,
	defineProps,
	defineEmits
} from 'vue';
const props = defineProps({
	labelList: {
		type: Array,
		required: true
	},
	activeIndex: {
		type: Number,
		required: true
	}
});
const emits = defineEmits(['changeIndex', 'addCate']);

const currentIndex = ref('item0');
watch(() => props.activeIndex, index => {
	currentIndex.value = `item${index}`;
});

const selectActive = (item, index) => {
	// 让父组件取改变props的activeIndex
	emits('changeIndex', index);
};

const addCate = () => {
	// 告诉父组件新增了分类，让父组件刷新数据
	emits('addCate', '');
};
</script>

<style scoped lang="scss">
@import "../../uni.scss";

.tab-container {
	margin: 20rpx auto;
	width: 90%;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	border-radius: 30rpx;
	overflow: hidden;

	.tab-scroll {
		flex: 1;
		height: 90rpx;
		box-sizing: border-box;

		// overflow: scroll;
		.tab-scroll-box {
			height: 90rpx;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;

			.tab-scroll-item {
				flex-shrink: 0; // flex元素收缩
				padding: 0 20rpx;
				color: #000;
				font-size: 30rpx;
				line-height: 90rpx;
				position: relative;
				border-radius: 30rpx;
				font-weight: bold;

				&.active {
					background-color: $bar-color;
					color: #fff;
					transition: all .5s;
				}

				// &.active::after {
				// 	content: '';
				// 	background-color: $base-color2;
				// 	width: 20rpx;
				// 	height: 20rpx;
				// 	position: absolute;
				// 	bottom: -10rpx;
				// 	left: 50%;
				// 	transform: translateX(-50%) rotate(45deg);
				// 	z-index: 999;
				// }
			}
		}
	}

	.tab-icon {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 90rpx;

		button {
			width: 100%;
			height: 100%;
			font-size: 30rpx;
			padding: 0;
			line-height: 90rpx;
			margin-left: 20rpx;
			background-color: $btn-primary-color;
			color: #fff;
			box-sizing: border-box;
		}
	}
}
</style>